Goggles go Global

📝 Gettin Testy

Results of pre-orders from our Early Access testers have been off the charts! Our customers were clearly looking for a one-stop shop for both toggles and goggles! 🎉

Based on this, we're ready to start rolling out our goggle offering. Unfortunately, if you remember from earlier, the goggle market is heavily regulated around the world. We need to make sure that our store is up to regulatory standards before we get hit with some hefty fines. Fortunately, LaunchDarkly's targeting capabilities will help us do that!

🚧 Prepare for Global Domination

Step 1: If you're still logged in as an Early Access user, make sure you logout before completing these steps, because we want to be sure our operational tools don't show to our customers.

Step 2: Because we're doing some internal testing, we are only letting our Developers see the debug tools we're going to set up. The code for the debug tools is already in place, we just need to target the appropriate segment and turn on the feature to show the tools on the site!

Step 3: We'll of course need another flag for these tools. Create one with the following values:

Flag Name: Custom Debug
Flag Key:
Type: Boolean
Description: optional, if you would like to add
Tags: optional, if you would like to add
Client-Side SDK Availability:
Variations: true:, false:

Step 4: Locate the comment block in the menu.tsx file located in the /src/components directory. It's a pretty sizeable block of code, so again make sure you're using the copy functionality, not highlighting! Here's the code:

       {devdebug ? (
          <NavigationMenu.Item>
            <NavigationMenuTrigger>
              <div className="bg-orange-500 p-2 text-white" style={{ width: "160px", height: "40px", alignItems: 'center', display: 'flex' }}>
                Debug: App Data
                <CaretDownDebug aria-hidden />
              </div>
            </NavigationMenuTrigger>
            <NavigationMenuContent>
              <List>
                <ListItem title="Selected Country">{uiCountry}</ListItem>
                <ListItem title="Product Categories"></ListItem>
                <ListItem title="Admin Access">
                  {adminMode ? "Enabled" : "Disabled"}
                </ListItem>
                <ListItem title="Billing API">
                  {billing ? "Enabled" : "Disabled"}
                </ListItem>
              </List>
            </NavigationMenuContent>
          </NavigationMenu.Item>
        ) : null}
        {devdebug ? (
          <NavigationMenu.Item>
            <NavigationMenuTrigger>
            <div className="bg-orange-500 p-2 text-white" style={{ width: "200px", height: "40px", alignItems: 'center', display: 'flex' }}>                Debug: Country Override
                <CaretDownDebug aria-hidden />
              </div>
            </NavigationMenuTrigger>
            <NavigationMenuContent>
              <List>
                <ListItem onClick={changeCountry.bind(null, "US")} title="USA">
                  🇺🇸
                </ListItem>
                <ListItem
                  onClick={changeCountry.bind(null, "MX")}
                  title="Mexico"
                >
                  🇲🇽
                </ListItem>
                <ListItem
                  onClick={changeCountry.bind(null, "CA")}
                  title="Canada"
                >
                  🇨🇦
                </ListItem>
                <ListItem
                  onClick={changeCountry.bind(null, "UK")}
                  title="United Kingdom"
                >
                  🇬🇧
                </ListItem>
                <ListItem
                  onClick={changeCountry.bind(null, "FR")}
                  title="France"
                >
                  🇫🇷
                </ListItem>
                <ListItem
                  onClick={changeCountry.bind(null, "PT")}
                  title="Portugal"
                >
                  🇵🇹
                </ListItem>
              </List>
            </NavigationMenuContent>
          </NavigationMenu.Item>
        ) : null}

We're ready to start using our debug tools!

Important Note
The comment block for this is located right above another comment block that you replaced in the Database Migration section. If you replaced both comments and can't find where this code should go, it should be placed right after line 62, <NavigationMenuList>.

🐛 Debug Time

Step 1: Open 4 - Customer Debug and add a targeting rule to target the Developers segment like we did for our New Product Experience Access feature. Make sure the Default rule for the feature is set to Debug Disabled and that if targeting is off, we're set to serve Debug Disabled.

Step 2: If your setting look like this, you're good to go!

Warning!
Double check that before you log back in, you're not seeing the debug tools. This will confirm we have our targeting right!

Step 3: Now we need to change our context so we can act as if we're in those different geographic regions we want to roll out to. We're going to use our operational tools to set a location and confirm that targeting is working as expected as we change our region manually. Log back in to the site using your Developer username and you should see these buttons in the toolbar at the top of the page:

With this menu ready to go, it's time to go worldwide!